<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="跟进"
      :visible.sync="followDialogShowed"
      :columns="followColumns"
      @submit="handleSubmitFollowCmd"
    />
    <dialog-columns-form
      v-model="formData"
      width="1100px"
      :title="isCheckPassed?'审核通过':'审核驳回'"
      :visible.sync="authDialogShowed"
      :columns="authColumns"
      @submit="handleSubmitAuth"
    />
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import { voteBadCommentApi } from '@/feature/cmt/infra/api/voteBadCommentApi'
import CURDTable from '@/framework/components/table/CURDTable'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import DialogColumnsForm from '@/framework/components/form/DialogColumnsForm'
import VoteBadCommentTypeEnum from '@/feature/cmt/infra/constants/VoteBadCommentTypeEnum'
import VoteBadCommentStatusEnum from '@/feature/cmt/infra/constants/VoteBadCommentStatusEnum'
import CheckStatusEnum from '@/infra/constant/CheckStatusEnum'
import { mapGetters } from 'vuex'
import DateUtil from '@/framework/infra/util/DateUtil'
import SearchType from '@/framework/constant/SearchType'
import AdminTypeEnum from '@/feature/mgr/infra/constants/AdminTypeEnum'

export default {
  components: { DialogColumnsForm, CURDTable },
  computed: {
    ...mapGetters(['userInfo']),
    status() {
      return this.$route.meta.status || null
    },
    option() {
      let list = 'list'
      let disableDefaultSearchParam = false
      if (this.status === VoteBadCommentStatusEnum.WAIT_FOLLOW.id) {
        disableDefaultSearchParam = true
        list = 'listCanFollow'
      } else if (this.status === VoteBadCommentStatusEnum.ING.id) {
        list = 'listMyFollow'
        disableDefaultSearchParam = true
      } else if (this.status === VoteBadCommentStatusEnum.WAIT_FINISH.id) {
        list = 'listCanCheck'
        disableDefaultSearchParam = true
      }
      return {
        disableDefaultSearchParam,
        requestApi: voteBadCommentApi,
        initListParams: () => {
          if (this.status === VoteBadCommentStatusEnum.WAIT_FINISH.id && !this.mineCheckFlag) {
            return {
              status: this.status
            }
          }
          return {}
        },
        requestApiNames: {
          list
        },
        showSelection: true,

        tab: this.status === VoteBadCommentStatusEnum.WAIT_FINISH.id ? {
          options: [{
            value: 0,
            text: '待审核'
          }, {
            value: 1,
            text: '已审核'
          }],
          defaultValue: 0,
          onChange: (v) => {
            this.mineCheckFlag = v
            this.$refs.table.setListParam('mineCheckFlag', v).reloadTable()
          }
        } : null,
        groupId: this.mineCheckFlag,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            width: 120,
            sortable: 'custom',
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '旺旺',
            sortable: 'custom',
            required: true,
            searchable: true,
            width: 130,
            prop: 'wanWanNo'
          },
          {
            label: '跟进记录',
            prop: 'followRecord',
            span: 24,
            width: 100,
            viewDetail: true,
            hiddenInForm: true,
            type: ColumnType.TEXTAREA
          },
          {
            label: '差评截图',
            width: 100,
            required: true,
            type: ColumnType.IMAGE,
            prop: 'cover'
          },
          {
            label: '差评链接',
            viewAsLink: true,
            width: 100,
            required: true,
            span: 24,
            type: ColumnType.TEXTAREA,
            prop: 'link'
          },
          {
            label: '评论类型',
            width: 80,
            prop: 'commentType',
            required: true,
            searchable: true,
            type: ColumnType.SELECT,
            options: VoteBadCommentTypeEnum
          },
          {
            label: '跟进天数',
            sortable: 'custom',
            prop: 'followDays',
            width: 110,
            hiddenInForm: true,
            type: ColumnType.NUMBER
          },
          {
            label: '状态',
            sortable: 'custom',
            width: 80,
            searchable: true,
            type: ColumnType.SELECT,
            hiddenInForm: true,
            options: VoteBadCommentStatusEnum,
            prop: 'status'
          },
          {
            label: '月销量',
            required: true,
            sortable: 'custom',
            defaultSort: 'desc',
            width: 90,
            precision: 0,
            searchable: true,

            searchOption: {
              options: {
                type: SearchType.RANGE
              }
            },
            prop: 'monthSaleNum',
            type: ColumnType.NUMBER
          },
          {
            label: '图片是否删除',
            hiddenInForm: true,
            prop: 'backoutFlag',
            searchable: true,
            width: 120,
            sortable: 'custom',
            type: ColumnType.RADIO,
            options: YesNoEnum
          },
          {
            label: '跟进是否完成',
            prop: 'finishFlag',
            required: true,
            searchable: true,
            hiddenInForm: true,
            width: 120,
            sortable: 'custom',
            type: ColumnType.RADIO,
            options: YesNoEnum
          },
          {
            label: '赔付金额',
            width: 110,
            hiddenInForm: true,
            sortable: 'custom',
            type: ColumnType.MONEY,
            prop: 'payOutAmount'
          },
          {
            label: '差评日期',
            type: ColumnType.DATE,
            width: 110,
            prop: 'commentDate',
            sortable: 'custom',
            required: true,
            searchable: true
          },

          {
            label: '登记人',
            prop: 'handlerId',
            width: 100,
            searchable: true,
            hiddenInForm: true,
            options: adminApi.listAll(),
            type: ColumnType.SELECT
          }, {
            label: '跟进人',
            prop: 'followerId',
            width: 100,
            hiddenInForm: true,
            showFilter: ({ isEdit }) => !isEdit,
            searchable: true,
            options: adminApi.listAll(),
            type: ColumnType.SELECT
          },
          {
            label: '投诉处理人',
            prop: 'finisherId',
            width: 100,
            // required: true,
            searchable: true,
            options: adminApi.listAllOfType(AdminTypeEnum.SELLER_AFTER.id),
            type: ColumnType.SELECT
          },
          {
            label: '备注',
            width: 150,
            type: ColumnType.TEXTAREA,
            prop: 'remark'
          },
          {
            label: '审核人',
            prop: 'checkerId',
            width: 100,
            searchable: true,
            hiddenInForm: true,
            options: adminApi.listAll(),
            type: ColumnType.SELECT
          },
          {
            label: '审核状态',
            width: 100,
            type: ColumnType.SELECT,
            hiddenInForm: true,
            options: CheckStatusEnum,
            prop: 'checkStatus'
          }, {
            label: '审核备注',
            width: 150,
            type: ColumnType.TEXTAREA,
            hiddenInForm: true,
            prop: 'checkRemark'
          },
          {
            label: '投诉处罚凭证',
            width: 100,
            type: ColumnType.IMAGE,
            hiddenInForm: true,
            prop: 'checkRemarkPic'
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    },
    authColumns() {
      if (this.isBatchOperate) {
        return [
          {
            label: '投诉处罚凭证',
            width: 120,
            showFilter: () => this.isCheckPassed,
            type: ColumnType.IMAGE,
            prop: 'remarkPic'
          },
          {
            label: '审核备注',
            width: 120,
            span: 24,
            type: ColumnType.TEXTAREA,
            prop: 'remark'
          }
        ]
      }
      return [
        {
          label: '店铺',
          prop: 'storeId',
          searchable: true,
          width: 120,
          sortable: 'custom',
          span: 6,
          type: ColumnType.PLAIN_TEXT,
          options: storeApi.options()
        },
        {
          label: '旺旺',
          width: 130,
          sortable: 'custom',
          searchable: true,
          span: 6,
          type: ColumnType.PLAIN_TEXT,
          prop: 'wanWanNo'
        },
        {
          label: '跟进记录',
          prop: 'followRecord',
          span: 24,
          width: 100,
          viewDetail: true,
          hiddenInForm: true,
          type: ColumnType.PLAIN_TEXT
        },
        {
          label: '差评截图',
          width: 100,
          span: 6,
          type: ColumnType.IMAGE,
          renderOptions: {
            disabled: true
          },
          prop: 'cover'
        },
        {
          label: '差评链接',
          viewAsLink: true,
          width: 100,
          span: 6,
          type: ColumnType.PLAIN_TEXT,
          prop: 'link'
        },
        {
          label: '评论类型',
          width: 80,
          prop: 'commentType',
          searchable: true,
          span: 6,
          type: ColumnType.PLAIN_TEXT,
          options: VoteBadCommentTypeEnum
        },
        {
          label: '跟进天数',
          sortable: 'custom',
          prop: 'followDays',
          span: 6,
          width: 110,
          type: ColumnType.PLAIN_TEXT
        },
        {
          label: '状态',
          sortable: 'custom',
          width: 80,
          span: 6,
          searchable: true,
          type: ColumnType.PLAIN_TEXT,
          options: VoteBadCommentStatusEnum,
          prop: 'status'
        },
        {
          label: '月销量',
          span: 6,
          sortable: 'custom',
          width: 90,
          precision: 0,
          searchable: true,
          searchOption: {
            options: {
              type: SearchType.RANGE
            }
          },
          prop: 'monthSaleNum',
          type: ColumnType.PLAIN_TEXT
        },
        {
          label: '图片是否删除',
          span: 6,
          prop: 'backoutFlag',
          searchable: true,
          width: 110,
          sortable: 'custom',
          type: ColumnType.PLAIN_TEXT,
          options: YesNoEnum
        },
        {
          label: '跟进是否完成',
          prop: 'finishFlag',
          searchable: true,
          width: 110,
          span: 6,
          sortable: 'custom',
          type: ColumnType.PLAIN_TEXT,
          options: YesNoEnum
        },
        {
          label: '赔付金额',
          width: 110,
          sortable: 'custom',
          span: 6,
          type: ColumnType.PLAIN_TEXT,
          prop: 'payOutAmount'
        },
        {
          label: '差评日期',
          type: ColumnType.PLAIN_TEXT,
          width: 110,
          prop: 'commentDate',
          span: 6,
          sortable: 'custom',
          searchable: true
        },
        // {
        //   label: '投诉处理人',
        //   prop: 'finisherId',
        //   width: 100,
        //   // required: true,
        //   searchable: true,
        //   options: adminApi.listAllOfType(AdminTypeEnum.BAD_COMMENT_HANDLER.id),
        //   type: ColumnType.SELECT
        // },
        {
          label: '备注',
          width: 150,
          span: 24,
          type: ColumnType.PLAIN_TEXT,
          prop: 'remark'
        },
        {
          label: '投诉处罚凭证',
          width: 120,
          showFilter: () => this.isCheckPassed,
          type: ColumnType.IMAGE,
          prop: 'remarkPic'
        },
        {
          label: '审核备注',
          width: 120,
          span: 24,
          type: ColumnType.TEXTAREA,
          prop: 'remark'
        }
      ]
    }
  },
  data() {
    return {
      isCheckPassed: true,
      formData: {},
      isBatchOperate: false,
      mineCheckFlag: 0,
      followDialogShowed: false,
      authDialogShowed: false,

      followColumns: [
        {
          label: '赔付金额',
          width: 100,
          required: true,
          type: ColumnType.MONEY,
          prop: 'payOutAmount'
        },
        {
          label: '图片是否删除',
          prop: 'backoutFlag',
          required: true,
          searchable: true,
          width: 100,
          type: ColumnType.RADIO,
          options: YesNoEnum
        },
        {
          label: '投诉处理人',
          prop: 'finisherId',
          width: 100,
          // required: true,
          searchable: true,
          options: adminApi.listAllOfType(AdminTypeEnum.SELLER_AFTER.id),
          type: ColumnType.SELECT
        },
        {
          label: '跟进是否完成',
          prop: 'finishFlag',
          required: true,
          searchable: true,
          width: 100,
          type: ColumnType.RADIO,
          options: YesNoEnum
        },
        {
          label: '跟进记录',
          prop: 'followRecord',
          width: 200,
          span: 24,
          rows: 10,
          type: ColumnType.TEXTAREA
        }
      ]
    }
  },
  methods: {
    handleCheckResolve({ arg }) {
      this.formData = { ...arg }
      this.formData.remark = ''
      this.formData.checkStatus = 5
      this.isCheckPassed = true
      this.authDialogShowed = true
      this.isBatchOperate = false
    },
    handleBatchCheckResolve({ $service }) {
      const ids = $service.notEmptySelectedIds
      if (ids) {
        // this.formData = {...arg}
        this.isBatchOperate = true
        this.formData.remark = ''
        this.formData.checkStatus = 5
        this.isCheckPassed = true
        this.authDialogShowed = true
        this.bathOpIdList = ids
        // await this.confirm('确认审核通过所选记录吗')
        // await this.baseRequestApi.check({checkStatus: 5, checkRemark: '', idList: ids})
        // this.reloadTable()
        // this.success('通过成功')
      }
    },
    handleBatchCheckReject({ $service }) {
      const ids = $service.notEmptySelectedIds
      if (ids) {
        this.isBatchOperate = true
        this.bathOpIdList = ids
        this.formData.remark = ''
        this.formData.checkStatus = 10
        this.isCheckPassed = false
        this.authDialogShowed = true
      }
    },
    handleCheckReject({ arg }) {
      this.formData = { ...arg }
      this.isBatchOperate = false
      this.formData.remark = ''
      this.isCheckPassed = false
      this.formData.checkStatus = 10
      this.authDialogShowed = true
    },
    async handleSubmitFollowCmd({ done }) {
      try {
        await voteBadCommentApi.follow(this.formData)
        this.$refs.table.reloadTable()
        this.followDialogShowed = false
      } finally {
        done()
      }
    },
    handleSubmitFollow({ $service, arg }) {
      this.$confirm('确定提交吗?', '提示').then(() => {
        voteBadCommentApi.submit(arg.id).then(() => {
          this.$message.success('提交成功')
          $service.reloadTable()
        })
      })
    },
    async handleRejectFollow({ arg }) {
      const { value } = await this.$prompt('确认拒绝跟进所选记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '拒绝理由不能为空'
      })
      await voteBadCommentApi.followReject({ id: arg.id, remark: value })
      this.$refs.table.reloadTable()
      this.$success('操作成功')
      // this.authDialogShowed = true
    },
    handleFollow({ arg }) {
      this.followDialogShowed = true
      const currentTime = DateUtil.currentTime()
      this.formData = {
        ...arg,
        followRecord: (arg.followRecord ? arg.followRecord + '\n' : '') + `【${this.userInfo.title} ${currentTime}】`
      }
    },
    async handleSubmitAuth({ done }) {
      try {
        await voteBadCommentApi.check({
          ...this.formData,
          checkRemark: this.formData.remark && this.formData.remark.trim() || '',
          idList: this.isBatchOperate ? this.bathOpIdList : [this.formData.id]
        })
        this.$refs.table.reloadTable()
        this.$success('操作成功')
        this.authDialogShowed = false
      } finally {
        done()
      }
    }
  }
}
</script>

